<!doctype html>
<html lang="zh-CN">

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Signal Control Client</title>
	<link rel="stylesheet" href="style.css">
	<script src="video_rtc.js"></script>
	<script src="data_rtc.js"></script>
</head>

<body>
	<div class="container">
		<!-- 视频层 - 最高层 -->
		<div class="video-layer">
			<div class="card">
				<div>
					<h2>Local ID</h2>
					<p id="localId"></p>
				</div>
				<div id="status">Status: Not connected</div>
				<div>
					<h2>Local ID</h2>
					<p id="dataLocalId"></p>
				</div>
				<div id="dataStatus">Status: Not connected</div>
				<div class="video-container">
					<video id="remoteVideo" autoplay playsinline style=";"></video>
					<div id="noSignalOverlay" class="no-signal-overlay">
						<div class="no-signal-text">无信号</div>
					</div>
				</div>
				<br>
				<div class="video-controls">
					<span class="badge">Send offer to:</span>
					<input id="offerId" class="input mono" placeholder="remote ID" value="usbcam" />
					<button id="offerBtn" class="btn">Send</button>
				</div>
				<div class="video-controls">
					<span class="badge">Send offer to:</span>
					<input id="dataOfferId" class="input mono" placeholder="remote ID" value="dataTrack" />
					<button id="dataOfferBtn" class="btn">Send</button>
				</div>
		</div>
		<!-- 控制层 - 下层 -->
		<div class="control-layer">
			<div class="card">
				<span class="badge">系统状态</span>
				<div class="system-status" style="margin-top: 12px;">
					<div class="status-grid" style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px;">
						<div class="status-item">
							<div class="hint">上行网速</div>
							<div class="mono" id="txSpeed">0.00 KB/s</div>
						</div>
						<div class="status-item">
							<div class="hint">下行网速</div>
							<div class="mono" id="rxSpeed">0.00 KB/s</div>
						</div>
						<div class="status-item">
							<div class="hint">CPU使用率</div>
							<div class="mono" id="cpuUsage">0.00%</div>
						</div>
						<div class="status-item">
							<div class="hint">4G信号强度</div>
							<div class="mono" id="signalStrength">-- dBm</div>
							<!-- 4G信号强度指示器 -->
							<div class="signal-indicator" id="signalIndicator">
								<div class="signal-bar"></div>
								<div class="signal-bar"></div>
								<div class="signal-bar"></div>
								<div class="signal-bar"></div>
								<div class="signal-bar"></div>
							</div>
							<div class="signal-info">
								<span class="signal-text">质量:</span>
								<span class="signal-quality" id="signalQuality">--</span>
							</div>
						</div>
						<div class="status-item">
							<div class="hint">服务状态</div>
							<div class="mono" id="serviceStatus">检查中...</div>
						</div>
						<div class="status-item">
							<div class="hint">4G网络状态</div>
							<div class="mono" id="simStatus">UNKNOWN</div>
						</div>
					</div>
					<div class="hint" style="margin-top: 8px; font-size: 12px;">
						最后更新: <span id="lastUpdate">--</span>
					</div>
				</div>
			</div>
			<div class="card">
				<div class="control-panel">
					<div class="connection-info">
						<div id="connStatus"><span class="status-dot dot-red"></span><span
								class="mono">DISCONNECTED</span></div>
						<div class="hint" style="visibility: hidden;">目标: <span class="mono"
								id="endpointText">ws://fy403.cn:8766</span></div>
					</div>

					<div class="control-buttons">
						<button id="reconnectBtn" class="btn">重新连接</button>
						<button id="stopAllBtn" class="btn">STOP ALL (Space)</button>
						<button id="emgBtn" class="btn">急停 T</button>
						<button id="throttleBtn" class="btn">档位调整 F</button>
					</div>
				</div>

				<div class="keyboard-controls">
					<div class="hint">按键映射：</div>
					<div class="kb">
						<div></div>
						<div id="keyW" class="key">W</div>
						<div></div>
						<div id="keyA" class="key">A</div>
						<div id="keyS" class="key">S</div>
						<div id="keyD" class="key">D</div>
					</div>
				</div>
			</div>
			<div class="card">
				<div id="debugInfo" class="debug-info">
					<h3>Debug Information</h3>
					<div id="videoInfo"></div>
				</div>
			</div>
		</div>

			<!-- <div class="card">
				<span class="badge">协议</span>
				<pre id="proto" class="mono" style="white-space:pre-wrap; margin-top:8px; color:#9fb4ff">
0:0xAA 1:0x55 2:type 3:key 4:value 5:0 6-7:checksum16(sum of bytes[0..5])
MSG_KEY=0x01 (key:1=W,2=S,3=A,4=D; value:1=DOWN,0=UP)
MSG_EMERGENCY_STOP=0x02, MSG_CYCLE_THROTTLE=0x03, MSG_STOP_ALL=0x04, MSG_QUIT=0x05, MSG_PING=0x10
MSG_SYSTEM_STATUS=0x20 (扩展帧12字节: 3:rx_speed_H,4:rx_speed_L,5:tx_speed_H,6:tx_speed_L,7:cpu_H,8:cpu_L,9:service_status,10:4g_signal)
				</pre>
			</div> -->
		</div>
	</div>
</body>

</html>